<template>
	<div>
				<div class="smp_panel">
					<div class="smp_panel_header">
						<div class="smp_panel_pre"></div>
						<div class="smp_panel_title">需求详情</div>
					</div>
					<div class="smp_panel_body_NopaddingTop">
							<div class=" smp_panel_1">
							<div class="smp_panel_header">
								<div class="smp_panel_pre"></div>
								<div class="smp_panel_title">基础信息</div>
							</div>
							<div class=" smp_panel_body">
								<el-descriptions border :cloumn="4" size="mini">
									<el-descriptions-item label="需求号">{{details.qmsNo}}</el-descriptions-item>
									<el-descriptions-item label="需求名称">{{details.qmsName}}</el-descriptions-item>
									<el-descriptions-item label="批次号">
										{{details.batchNum|dictName("SMP0010")}}
									</el-descriptions-item>
									<el-descriptions-item label="主系统">
										{{details.mainSystemNo|getSystemName}}({{details.mainSystemNo}})
									</el-descriptions-item>
									<el-descriptions-item label="需求状态">
										{{details.status|dictName("SMP0007")}}
									</el-descriptions-item>
									<el-descriptions-item label="申请时间">{{details.createTime}}</el-descriptions-item>

									<el-descriptions-item label="内联测试版本基线号">{{details.esbSitRelase}}
									</el-descriptions-item>
									<el-descriptions-item label="外联测试版本基线号">{{details.oesbSitRelase}}
									</el-descriptions-item>
									<el-descriptions-item label="提交测试时间">{{details.sitTime}}</el-descriptions-item>

									<el-descriptions-item label="内联生产版本基线号">{{details.esbOprdRelase}}
									</el-descriptions-item>
									<el-descriptions-item label="外联生产版本基线号">{{details.oesbOprdRelase}}
									</el-descriptions-item>

									<el-descriptions-item label="提交生产时间">{{details.oprdTime}}</el-descriptions-item>

									<el-descriptions-item label="ESB需求编号">{{details.esbQmsNo}}</el-descriptions-item>
									<el-descriptions-item label="ESB需求名称">{{details.esbQmsName}}</el-descriptions-item>


									<el-descriptions-item label="开发人员">
										<el-popover trigger="hover" placement="bottom-start">
											<div class=" smp_panel_1">

												<div class="smp_panel_header">
													<div class="smp_panel_pre"></div>
													<div class="smp_panel_title">用户信息</div>

												</div>
												<div class="smp_panel_body">

													<el-descriptions column="2" border>
														<!-- <div slot="title">
										{{scope.row.applyUser|getUserChinesName}}
									</div> -->
														<el-descriptions-item label="姓名">
															{{details.dealUser|getUserChinesName}}
														</el-descriptions-item>
														<el-descriptions-item label="电话">
															{{$store.getters.getUser(details.dealUser).phone}}
														</el-descriptions-item>
														<el-descriptions-item label="部门">
															{{$store.getters.getUser(details.dealUser).orgName}}
														</el-descriptions-item>
													</el-descriptions>
												</div>
											</div>

											<div slot="reference">
												<el-link type="primary" :underline="false">
													{{details.dealUser|getUserChinesName}}
												</el-link>

											</div>
										</el-popover>


										<!-- {{details.dealUser|getUserChinesName}} -->
									</el-descriptions-item>
									<el-descriptions-item label="外联ESB需求编号">{{details.oesbQmsNo}}</el-descriptions-item>
									<el-descriptions-item label="外联ESB需求名称">{{details.oesbQmsName}}
									</el-descriptions-item>

								</el-descriptions>

							</div>
						</div>

						<div class=" smp_panel_1">
							<div class="smp_panel_header">
								<div class="smp_panel_pre"></div>
								<div class="smp_panel_title">工单信息</div>
							</div>
							<div class=" smp_panel_body">
								<el-table :data="list" size="mini" stripe style="width: 100%">

									<el-table-column prop="id" label="工单号" align="center">
									</el-table-column>
									<el-table-column prop="applyType" label="工单类型" align="center">
										<template slot-scope="scope">
											{{scope.row.applyType|dictName("SMP0009")}}
										</template>
									</el-table-column>



									<el-table-column prop="applySysNo" label="申请系统" align="center" width="300"
										show-overflow-tooltip>
										<template slot-scope="scope">
											<span v-if="scope.row.applySysNo!=''">
												{{scope.row.applySysNo|getSystemName}}({{scope.row.applySysNo}})
											</span>
										</template>
									</el-table-column>

									<el-table-column prop="applyUser" label="申请人" align="center">
										<template slot-scope="scope">

											<el-popover trigger="hover" placement="bottom-start">
												<div class=" smp_panel_1">

													<div class="smp_panel_header">
														<div class="smp_panel_pre"></div>
														<div class="smp_panel_title">用户信息</div>

													</div>
													<div class="smp_panel_body">

														<el-descriptions column="2" border>
															<!-- <div slot="title">
												{{scope.row.applyUser|getUserChinesName}}
											</div> -->
															<el-descriptions-item label="姓名">
																{{scope.row.applyUser|getUserChinesName}}
															</el-descriptions-item>
															<el-descriptions-item label="电话">
																{{$store.getters.getUser(scope.row.applyUser).phone}}
															</el-descriptions-item>
															<el-descriptions-item label="部门">
																{{$store.getters.getUser(scope.row.applyUser).orgName}}
															</el-descriptions-item>
														</el-descriptions>
													</div>
												</div>

												<div slot="reference">
													<el-link type="primary" :underline="false">
														{{scope.row.applyUser|getUserChinesName}}
													</el-link>
												</div>
											</el-popover>
										</template>
									</el-table-column>

									<!-- <el-table-column prop="batchNum" label="批次号" align="center">
					<template slot-scope="scope">
						{{scope.row.batchNum|dictName("SMP0010")}}
					</template>
				</el-table-column> -->

									<el-table-column prop="applyDate" label="申请时间" align="center">
									</el-table-column>

									<!-- 	<el-table-column prop="curUser" label="当前处理人"  align="center">
					<template slot-scope="scope">
						{{scope.row.curUser|getUserChinesName}}
					</template>
				</el-table-column> -->
									<el-table-column prop="status" label="工单状态" align="center">
										<template slot-scope="scope">
											{{scope.row.status|dictName("SMP0012")}}
										</template>
									</el-table-column>
									<el-table-column label="操作" align="center" width="150">
										<template slot-scope="scope">
											<el-link size="mini" type="primary" :underline="false"
												style="font-size: 12px;" @click="handleEdit(scope.$index, scope.row)">详情
											</el-link>

										</template>
									</el-table-column>
								</el-table>
								<div class="smp-pagination">
									<el-pagination background size="medium"
										layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize"
										:page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
										@current-change="currentChange" @size-change="sizeChange">
									</el-pagination>
								</div>
							</div>
						</div>



						<div class=" smp_panel_1">
							<div class="smp_panel_header">
								<div class="smp_panel_pre"></div>
								<div class="smp_panel_title">服务调用</div>

								<div class="smp-panel_option" style="text-align: right;float:right;margin-top:-45px">
									<el-button @click="exportCallList" size="mini">
										<i class="el-icon-download"></i>
										导出
									</el-button>

								</div>
							</div>
							<div class=" smp_panel_body">
								<el-table :data="systemCallList" size="mini" stripe style="width: 100%">
									<!-- <el-table-column prop="regCode" label="服务编码(R)" align="center"></el-table-column> -->
									<el-table-column prop="transCode" label="交易码" align="center"></el-table-column
										width="120">
									<el-table-column prop="transName" label="交易名称" align="center" show-overflow-tooltip
										width="120"></el-table-column>
									<el-table-column prop="busCode" label="服务编码(R)" align="center" width="120">
									</el-table-column>

									<el-table-column prop="regSysCode" label="服务系统" align="center" show-overflow-tooltip
										width="120">
										<template slot-scope="scope">
											{{scope.row.regSysCode|getSystemName}}({{scope.row.regSysCode}})
										</template>
									</el-table-column>
									<el-table-column prop="systemNo" label="消费系统" align="center" show-overflow-tooltip
										width="120">
										<template slot-scope="scope">
											{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
										</template>
									</el-table-column>
									<!-- <el-table-column prop="channel" label="渠道号" width="120"></el-table-column> -->
									<el-table-column prop="msgAgreement" label="消费方报文格式" align="center" width="120">
									</el-table-column>
									<el-table-column prop="msgCode" label="消费方字符编码" align="center" width="120">
										<template slot-scope="scope">
											{{scope.row.msgCode|dictName('SMP0004')}}
										</template>
									</el-table-column>
									<el-table-column prop="pubCode" label="服务编码(P)" align="center" width="120">
									</el-table-column>
									<!-- <el-table-column prop="testResult" label="测试结果" align="center" width="120">
								<template slot-scope="scope">
									{{scope.row.testResult|dictName('SMP0033')}}
								</template>
							</el-table-column> -->
									<el-table-column prop="proxyPath" label="ESB测试URL" align="center"
										show-overflow-tooltip></el-table-column>

									<el-table-column label="操作" align="center" min-width="120">
										<template slot-scope="scope">
											<el-link size="mini" type="primary" :underline="false"
												style="font-size: 12px;" @click="handleEdit4(scope.$index, scope.row)">
												服务详情</el-link>
												<el-divider direction="vertical"></el-divider>
											<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
												@click="handleService2Json(scope.row)">模拟测试</el-link>
											<!-- <el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
									@click="handleEdit5(scope.$index, scope.row)">测试结果上传</el-link> -->
										</template>
									</el-table-column>
								</el-table>
								<div class="smp-pagination">
									<el-pagination background size="medium"
										layout="total,sizes,prev, pager, next,jumper" :page-size="query1.pageSize"
										:page-sizes="[5,10,20,200]" :total="total1" :current-page="query1.pageNum"
										@current-change="currentChange1" @size-change="sizeChange1">
									</el-pagination>
								</div>
							</div>
						</div>


						<div class=" smp_panel_1">
							<div class="smp_panel_header">
								<div class="smp_panel_pre"></div>
								<div class="smp_panel_title">时间线</div>
							</div>
							<div class="smp_panel_body">
								<div
									style="margin-top: 50px;margin-bottom: 30px;text-align: center;font-size: 14px;color:#606266">
									<div style="border-bottom: 3px solid #002571; width: 96%;margin: auto;"></div>
									<!-- #6adfff -->
									<el-row style="margin-top: -29px;">
										<el-col v-for="item in list2" :span="8">
											<div>{{item.status}}</div>
											<div>
												<div class="circular" />
											</div>
											<div>{{item.updateTime}}</div>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					
					
					
					</div>
					<div class="smp_panel_footer" v-if="vaildPermission('SA0004')">

						<el-button size="mini" plain type="primary" @click="createFile(details)">
							<i class="el-icon-upload2"></i>导出内联配置
						</el-button>
						<el-button size="mini" plain type="success" @click="createFile1(details)">
							<i class="el-icon-upload2"></i>导出外联配置
						</el-button>


						<el-button size="mini" plain type="primary" @click="Commit(details,'测试基线号')">提交测试
						</el-button>
						<!-- 			<el-button style="width: 120px;" size="mini" @click="Commit(details,'准生产版本基线号')">移交准生产版本</el-button>
		-->
						<el-button size="mini" plain type="success" @click="Commit(details,'生产基线号')">生产版本
						</el-button>

						<el-button size="mini" plain type="success" @click="exportDocument()">导出文档
						</el-button>

						<el-button size="mini" plain type="primary" @click="exportOesbDocument()">导出外联文档
						</el-button>


					</div>
				</div>
		</el-row>

		<relase ref="relase" @getInit="getInit" />
		<esbRelase ref="esbRelase" />
		<oesbRelase ref="oesbRelase" />
		<requirement ref="requirement" @fresh="fresh" />
		<oesbrequirement ref="oesbrequirement" @fresh="fresh" />
		<testResult ref="testResult" />


	</div>
</template>

<script>
	"use strict";
	import {
		getRequirementBatchInfo,
		getWorkOrderInfoByQmsNo,
		getRequirementBatchDiagram
	} from '@/api/requirementBatch.js';
	import {
		getConsumeInfoByQmsNo,
		exportCallList,
		exportInterfaceList
	} from '@/api/service.js';

	import {
		exportDocument
	} from '@/api/document.js';


	import relase from './components/relase'
	import esbRelase from './components/esbRelase.vue';
	import oesbRelase from './components/oesbRelase.vue';
	import requirement from './components/requirement.vue';
	import oesbrequirement from './components/oesbrequirement.vue';
	import testResult from './components/testResult.vue';
	export default {

		components: {
			relase,
			esbRelase,
			requirement,
			oesbrequirement,
			oesbRelase,
			testResult
		},

		data() {
			return {
				pagination1show: false,
				qmsNo: '',
				details: {},
				list: [],

				query: {
					body: {
						qmsNo: '',
						batchNum: ''
					},
					pageNum: 1,
					pageSize: 5
				},
				list2: [],
				systemCallList: [],
				query1: {
					body: {
						associatedRequirement: '',
						batchNum: ''
					},
					pageNum: 1,
					pageSize: 5
				},
			};

		},


		created() {
			this.query.body.qmsNo = this.$route.query.qmsNo;
			this.query.body.batchNum = this.$route.query.batchNum;
			this.query1.body.associatedRequirement = this.$route.query.qmsNo;
			this.query1.body.batchNum = this.$route.query.batchNum;

			Object.assign(this.query, this.$route.query);
			if (this.$route.query.pageNum1 != undefined) {
				this.query1.pageNum = this.$route.query.pageNum1;
			}
			if (this.$route.query.pageSize1 != undefined) {
				//this.query1.pageSize =this.$route.query.pageSize1;
				this.query1.pageSize = parseInt(this.$route.query.pageSize1);
			}


			this.getInit();
			this.getConsumeInfoByQmsNo();
		},
		methods: {

				handleService2Json(row){
				/* row.pubSysCode = row.systemNo;
				row.regSysCode = this.row.systemNo;
				row.transCode = this.row.transCode;
				row.transName = this.row.transName; */
				row.pubSysCode = row.systemNo;
				if(row.msgAgreement=='http/json'||row.msgAgreement=='https/json'){
					
						this.$router.push({
							name: 'httpTrans',
							query: Object.assign(row)
						})
				}else if(row.msgAgreement=='socket/xml'){
					this.$router.push({
						name: 'transUtil',
						query: Object.assign(row)
					})
				} else{
					this.$message({
						duration:5000,						
						type: 'info',
						message: "适配中...！"
					});
				}
			},
			exportOesbDocument() {
				this.$refs.oesbrequirement.ShowDialog(this.details);
			},


			exportDocument() {

				this.$refs.requirement.ShowDialog(this.details);








				/* 	const loading = this.$loading({
						lock: true,
						text: '数据处理中，请耐心等待',
						spinner: 'el-icon-loading'
					})
					exportDocument(this.query.body).then(res => {
						loading.close();
						let name = this.query.body.qmsNo+"投产文档.zip";
						let file = {
							uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
							name: this.query.body.qmsNo+"投产文档.zip", // 文件名
							status: 'done', // 状态有：uploading done error removed
						}
						const blob = new Blob([res.data]);
						const blobURL = window.URL.createObjectURL(blob);
						const aLink = document.createElement('a');
						aLink.href = blobURL;
						aLink.setAttribute('download', name);
										
						if (typeof aLink.download === 'undefined') {
							aLink.setAttribute('target', '_blank');
						}
						aLink.style.display = 'none';
						document.body.appendChild(aLink);
						aLink.click();
						document.body.removeChild(aLink);
						window.URL.revokeObjectURL(blob);
					}).error(err=>{
						loading.close();
					}); */
			},



			getConsumeInfoByQmsNo() {


				//alert(this.$route.query.pageSize1)
				//Object.assign(this.query1,this.$route.query.query1);

				getConsumeInfoByQmsNo(this.query1).then(response => {
					this.systemCallList = response.data.extend.list;
					this.total1 = response.data.extend.total;



					let query = this.$route.query;
					//Object.assign(query,this.query.body);
					query.pageNum1 = this.query1.pageNum;
					query.pageSize1 = this.query1.pageSize;

					this.$router.push({
						query: query
					}, () => {})
				})
			},


			exportCallList() {
				const loading = this.$loading({
					lock: true,
					text: '数据处理中，请耐心等待',
					spinner: 'el-icon-loading'
				})
				exportInterfaceList(this.query1.body).then(res => {
					loading.close();
					let name = this.query.body.qmsNo + "_服务调用.xlsx";
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: this.query.body.qmsNo + "_服务调用.xlsx", // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download', name);

					if (typeof aLink.download === 'undefined') {
						aLink.setAttribute('target', '_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
			},

			createFile(details) {
				this.$refs.esbRelase.ShowDialog(details);
			},

			createFile1(details) {
				this.$refs.oesbRelase.ShowDialog(details);
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getInit();
			},

			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getInit();
			},

			currentChange1(val) {
				this.query1.pageNum = val;
				this.getConsumeInfoByQmsNo();
			},

			sizeChange1(val) {
				this.query1.pageSize = val;
				this.query1.pageNum = 1;
				this.getConsumeInfoByQmsNo();
			},

			Commit(details, val) {
				let row1 = {};
				Object.assign(row1, details);
				this.$refs.relase.showDialog(row1, val);
			},

			handleEdit(index, row) {
				this.$router.push({
					name: 'demandDetails',
					query: Object.assign(row)
				})
			},

			handleEdit4(index, row) {
				this.$router.push({
					name: 'serviceDetails',
					query: {
						"busCode": row.busCode,
						"transCode": row.transCode,
						"systemNo": row.regSysCode
					}
				})
			},


			handleEdit5(index, row) {
				this.$refs.testResult.ShowDialog(row);
			},


			getInit() {

				getRequirementBatchInfo(this.query.body).then(response => {
					this.details = response.data.extend;
					/* this.$message({
						duration:5000,
						type: 'success',
						message: response.data.message
					});	 */
				}).catch(error => {
					this.$message({
						duration: 5000,
						type: 'error',
						message: "查询失败！"
					});
				});

				getWorkOrderInfoByQmsNo(this.query).then(response => {
					this.list = response.data.extend.list;
					this.total = response.data.extend.total;

					let query = this.$route.query;
					//Object.assign(query,this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					}, () => {})
					/* if(response.data.code == '0000'){
						ththis.$message({
						duration:5000,						type: 'success',
							message: response.data.message
						});	
					}else{
						thithis.$message({
						duration:5000,					type: 'success',
							message: response.data.message
						});
					} */


				}).catch(error => {
					this.$message({
						duration: 5000,
						type: 'error',
						message: "查询失败！"
					});
				});


				getRequirementBatchDiagram(this.query.body).then(response => {
					this.list2 = response.data.extend;
				}).catch(error => {
					this.$message({
						duration: 5000,
						type: 'error',
						message: "查询失败！"
					});
				});

			},

			fresh() {
				this.getInit();
				this.getConsumeInfoByQmsNo();
			},


		}

	}
</script>

<style scoped>
	.baseInfo {
		background-color: #f7f7f7;
		margin: 20px 0 10px 40px;
	}

	.el-descriptions__body {
		color: #606266;
		background-color: #f7f7f7;
	}

	.requirementDetailsFooter {
		margin-bottom: 20px;
	}


	.detailsTitle {
		color: black;
		font-size: 20px;
		text-align: left;
		margin-top: 10px;
		margin-left: 20px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}

	.serviceInfo {
		text-align: left;
		margin-left: 40px;
		margin-bottom: 40px;
	}

	.serviceInfo span {
		line-height: 40px;
		text-align: left;
		color: #606266;
		font-size: 14px;
	}
</style>
<style scoped lang="less">
	.circular {
		border: 4px solid #67c23a;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background: white;
		margin: auto;
	}
</style>
